<template>
  <div class="box3">
    <!-- 标题 -->
    <div>
      <van-nav-bar title="商品列表" left-arrow @click-left="$router.back()" />
    </div>
    <!-- 搜索框 -->
    <div>
      <van-search shape="round" :value="querySearch || '搜索商品'" show-action
      @click="$router.push('/ferio')"
      >
        <template #action>
          <div style="margin-top: 10px">
            <van-icon name="list-switching" size="30" />
          </div>
        </template>
      </van-search>
    </div>
    <div>
      <van-tabs v-model="pyToorc" @click="onSearch1">
        <van-tab name="all" title="综合"></van-tab>
        <van-tab name="sales" title="销量"></van-tab>
        <van-tab name="price" title="价格"></van-tab>
      </van-tabs>
    </div>
    <div class="b">
      <meixs1
        v-for="item in meixs1"
        :key="item.goods_id"
        :item="item"
      ></meixs1>
    </div>
  </div>
</template>

<script>
import meixs1 from '@/components/meixs1.vue'
import { getProList } from '@/api/producit'
export default {
  components: { meixs1 },
  name: 'ComMeixs',
  component: {
    meixs1
  },
  data () {
    return {
      meixs1: [],
      page: 1,
      pyToorc: 'all'
    }
  },
  methods: {
    async onSearch () {
      const { data: { data: { list } } } = await getProList({
        categoryId: this.$route.query.categoryId,
        goodsName: this.querySearch,
        page: this.page
      })
      this.meixs1 = list.data
      console.log(list)
    },
    onSearch1 () {
      this.onSearch()
    }
  },
  computed: {
    querySearch () {
      return this.$route.query.sercuvd
    }
  },
  created () {
    this.onSearch()
  }
}
</script>

<style lang="less">
.box3 {
  .Search {
    margin-top: 50px;
  }
.b{
display:flex;
width: 100%;
}
}
</style>
